<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" @close="close">
      <el-form :model="book" :rules="rules" ref="bookForm" label-width="100px" class="demo-ruleForm">
        <template v-if="type===2">
          <el-form-item label="图书编号" prop="bookId">
            <el-input v-model="book.bookId" placeholder="请输入图书ID..." disabled></el-input>
          </el-form-item>
        </template>
        <el-form-item label="图书名称" prop="bookName">
          <el-input v-model="book.bookName" placeholder="请输入图书名称..."></el-input>
        </el-form-item>
        <el-form-item label="图书作者" prop="authorName">
          <el-input v-model="book.authorName" placeholder="请输入图书作者..."></el-input>
        </el-form-item>
        <el-form-item label="图书价格" prop="price">
          <el-input v-model="book.price" placeholder="请输入图书价格..."></el-input>
        </el-form-item>
        <el-form-item label="图书分类" prop="categoryId">
          <el-select v-model="book.categoryId" placeholder="请选择图书分类">
            <el-option v-for="category in categoryList" :key="category.categoryId" :label="category.categoryName" :value="category.categoryId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
              v-model="book.createTime"
              type="datetime"
              value-format="yyyy/MM/dd HH:mm:ss"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图书状态" prop="status">
          <el-radio-group v-model="book.status">
            <el-radio label="1">上架</el-radio>
            <el-radio label="0">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="type===2">
          <el-form-item>
            <el-button type="primary" @click="updateBook">更新图书</el-button>
          </el-form-item>
        </template>
        <template v-if="type===1">
          <el-form-item>
            <el-button type="primary" @click="addBook">添加图书</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </template>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name:'BookAddOrUpdate',
  props:["flag","title","categoryList","type","bookForm"],
  data(){
    return{
      dialogVisible:false,
      book:{
        bookId:'',
        bookName:'',
        authorName:'',
        price:'',
        categoryId:'',
        createTime: '',
        status:'1'
      },
      rules:{
        bookName:[
          { required: true, message: '请输入图书名称', trigger: 'blur' }
        ],
        authorName:[
          { required: true, message: '请输入图书作者', trigger: 'blur' }
        ],
        price:[
          { required: true, message: '请输入图书价格', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '请选择日期时间', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '请选择图书分类', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择图书状态', trigger: 'change' }
        ]
      }
    }
  },
  methods:{
    /* 添加图书 */
    addBook(){
      this.$emit("add-book",this.book)
    },
    /* 更新 */
    updateBook(){
      this.$emit("update-book",this.book)
    },
    close(){
      //this.$refs['bookForm'].resetFields();
      //重置表单
      this.book={
        bookId:'',
        bookName:'',
        authorName:'',
        price:'',
        categoryId:'',
        createTime: '',
        status:'1'
      }
      this.$nextTick(()=>{
        //取消表单验证
        this.$refs['bookForm'].clearValidate()
      })

      this.$emit("close-dialog")
    }
  },
  watch:{
    flag(val){
      this.dialogVisible = val
    },
    bookForm(val){
      this.book.bookId=val.bookId
      this.book.bookName=val.bookName
      this.book.authorName=val.authorName
      this.book.price=val.price
      this.book.createTime=val.createTime
      this.book.categoryId=val.categoryId
      this.book.status=val.status+""
    }
  }
}
</script>
